<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    
    <f:view contentType="text/html">
         <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        </h:head>
        
        <h:body>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="120" resizable="true" closable="true" collapsible="true">
                   
                 <p:toolbar>
                     <p:toolbarGroup align="left">
                         <h2>Education-X!  </h2>
                         <h:outputText value="&#160;" />
                      </p:toolbarGroup>

                     <p:toolbarGroup align="center">
                         <h:outputText value="&#160;" />
                         <h:graphicImage url="images\xmen.jpg" width="50" height="50"></h:graphicImage>                     
                     </p:toolbarGroup>

                     <p:toolbarGroup align="right">
                         <h:link value="Courses" outcome="courses"/>     
                         <p:separator />  
                         <p:separator />  
                         <h:link value="Profile" outcome="userPage" />
                         <p:separator />  
                         <p:separator />  
                         <h:link value="Tags" />
                     </p:toolbarGroup>
                 </p:toolbar>
             
                </p:layoutUnit>

                <p:layoutUnit position="center" size="300">
                     <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                <h1>New User</h1>
                    <h:form>
                        <h:panelGrid columns="2">
                            <h:outputText value="Name:"/>
                            <h:inputText id="name" value="#{user.user.name}" title="Name" required="true" requiredMessage="The name field is required." />
                            
                            <h:outputText value="Email:"/>
                            <h:inputText id="email" value="#{user.user.email}" title="Email" required="true" requiredMessage="The email field is required." validatorMessage="user email is not valid" >
                                <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                            </h:inputText>
                            
                            
                            <h:outputText value="Password:"/>
                            <h:inputSecret id="password" value="#{user.user.password}" title="Password" required="true" requiredMessage="The password field is required." validatorMessage="Password must meet the requirement" >
                                	<f:validateRegex  pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20})" />
                            </h:inputSecret>
                        </h:panelGrid>
                        <br />  
                        <h:commandButton action="#{user.create}" value="Create a new user" onclick="return checkEmail(this);"/>
                        <br />                                   
                    </h:form>
                                
                     <h:link value="Go to Login Page" outcome="login" />
                
                </p:layoutUnit>

           </p:layout>
        </h:body>
        
        
    </f:view>
    
</html>
